// src/components/widgets.jsx
'use client';
import React, {useState} from 'react';
import {SearchIcon} from "@heroicons/react/outline";
import News from "@/app/forum/_components/news";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
// import {motion} from "framer-motion";
// import {motion} from "motion/react";

const Widgets = ({articles, users}) => {
    const [articleNum, setArticleNum] = useState(3)
    const [userNum, setUserNum] = useState(3)

    return (
        // <div className={`xl:w-[600px] hidden lg:inline ml-8 space-y-5`}>
        <div className={`xl:w-[400px] hidden lg:inline ml-8 space-y-5`}>
            <div className={`w-[90%] xl:w-[75%] sticky top-0 bg-white py-2 z-50`}>
                <div className={`flex items-center p-3 rounded-full bg-red-300 relative`}>
                    <SearchIcon className={`size-5 z-50 text-gray-500`}/>
                    <input className={`absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700  
                  focus:shadow-lg focus:bg-white bg-gray-100`} type={'text'} placeholder={'Search Post'}/>
                </div>
            </div>

            <div className={`text-gray-700 space-y-3 bg-gray-100 rounded-xl pt-2 w-[90%] xl:w-[75%]`}>
                <h4 className={`font-bold text-xl px-4`}>新闻</h4>
                {articles.slice(0, articleNum).map(a => (
                    // <motion.div
                    //     key={a.title}
                    //     initial={{opacity: 0}}
                    //     animate={{opacity: 1}}
                    //     exit={{opacity: 0}}
                    //     transition={{duration: 1}}
                    // >
                    <News key={a.title} article={a}/>
                    // </motion.div>
                ))}
                <button onClick={() => setArticleNum(articleNum + 3)}
                        className={`text-blue-300 pl-4 pb-3 hover:text-blue-400`}>Show more
                </button>
            </div>

            {/*滚动到该div, 会sticky在top16的位置*/}
            <div className={`sticky top-16 text-gray-700 space-y-3 bg-gray-100 pt-2 rounded-xl w-[90%] xl:w-[75%]`}>
                <h4 className={`font-bold text-xl px-4`}>Who to follow</h4>
                {users.slice(0, userNum).map(u => (
                    // <motion.div
                    //     key={u.login.username}
                    //     initial={{opacity: 0}}
                    //     animate={{opacity: 1}}
                    //     exit={{opacity: 0}}
                    //     transition={{duration: 1}}
                    // >
                    <div className={`flex items-center px-4 py-2 cursor-pointer hover:bg-gray-200
                        transition duration-500 ease-out`}
                        // key={u.login.username}>
                         key={u.id}>
                        {/*<img className={`rounded-full`}*/}
                        {/*     // width={40} src={u.picture.thumbnail} alt=""/>*/}
                        {/*     width={40} src={u.image} alt=""/>*/}
                        <Avatar className={`size-10 mr-2 rounded-full`}>
                            <AvatarImage className={`rounded-full`} src={u.image}/>
                            <AvatarFallback className={`bg-blue-400 text-white rounded-full`}>
                                {u.name.charAt(0).toUpperCase()}
                            </AvatarFallback>
                        </Avatar>
                        <div className={`truncate ml-4 leading-5`}>
                            <h4 className={`font-bold hover:underline text-[14px] truncate`}>
                                {u.name}</h4>
                            <h5 className={`text-[13px] text-gray-500 truncate`}
                            >{u.name}</h5>
                        </div>
                        <button
                            className={`ml-auto bg-black text-white rounded-full text-sm
                            px-3.5 py-1.5 font-bold`}>
                            Follow
                        </button>
                    </div>
                    // </motion.div>
                ))}
                <button onClick={() => setUserNum(userNum + 3)}
                        className={`text-blue-300 pl-4 pb-3 hover:text-blue-400`}
                > Show more
                </button>
            </div>
        </div>
    );
};

export default Widgets;